<template>
  <section class="component z-tree-node-component">
    <div class="title">
      <div v-if="data.type===0" class="row between-span">
        <div  @click="selectTreeNode">
          <span style="display:inline-block;width:20px;">
              <Icon :size="expand?16:14" :type="expand?'folder':'android-folder'"></Icon>
          </span> {{data.name}}
        </div>
        <Dropdown trigger="click" @on-click="catalogHandle($event,data)">
          <a href="javascript:void(0)">
            <Icon :size="20" class="font-size:1.5" type="navicon-round"></Icon>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem name="add-content">添加内容</DropdownItem>
            <DropdownItem name="add-catalog">添加目录</DropdownItem>
            <DropdownItem name="update-catalog">修改目录</DropdownItem>
            <DropdownItem name="delete-catalog">删除目录</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <div v-else>
        <div  @click="selectTreeNode" :class="{selected:selected}">
          <span style="display:inline-block;width:20px;text-align:center;">
             <Icon type="document"></Icon>
          </span> {{data.name}}
        </div>
      </div>
    </div>
    <div class="children" v-if="data.children&&data.children.length" v-show="expand">
      <z-tree-node v-for="node in data.children" :key="node._id" :data.sync="node"></z-tree-node>
    </div>
  </section>
</template>
<script>
  export default {
    name: 'z-tree-node',
    componentName: 'z-tree-node',
    data () {
      return {
        expand: false,
        selected: false
      }
    },
    props: {
      data: {
        type: Object
      }
    },
    computed: {},
    methods: {
      catalogHandle (action, data) {
        let root = this.getRoot()
        if (root) {
          root.$emit('command', {
            event: action,
            id: data._id
          })
        }
      },
      getRoot () {
        var parent = this.$parent
        while (parent && parent.$options.componentName !== 'z-tree') {
          parent = parent.$parent
        }
        return parent
      },
      selectTreeNode () {
        if (this.data.type === 0) {
          this.expand = !this.expand
        } else {
          this.selected = true
          this.getRoot().setSelected(this.data)
        }
      }
    },
    mounted () {}
  }
</script>
<style  lang="less" scoped>
  @import '~imports/assets/styles/theme.less';

  .selected{
    color:@COLOR3;
  }
  .children {
    padding-left: 15px;
  }

  .z-tree-node-component {
    line-height: 20px;
    font-size: 14px;
  }

  .title:hover{
    cursor:pointer;
  }

</style>
